<template>
	<view>
		<view style="display: flex; align-items: center; justify-content: space-around;">
			<view :style="'color:#969799;width:365rpx;padding:5rpx;border-top-right-radius:10rpx;border-top-left-radius:10rpx;text-align:center;font-size:30rpx;'+'background-color:'+(tabsIndex==0?'#ffffff':'#f2f2f2')" @click="tabsIndex=0">外卖</view>
			<view :style="'color:#969799;width:365rpx;padding:5rpx;border-top-right-radius:10rpx;border-top-left-radius:10rpx;text-align:center;font-size:30rpx;'+'background-color:'+(tabsIndex==1?'#ffffff':'#f2f2f2')" @click="tabsIndex=1">自取</view>
		</view>
		<view v-show="tabsIndex==0" >
			<van-radio-group :value="addressId">
				<van-cell-group>
					<view v-for="(item,index) in addressList" :key="item.id">
						<van-cell :title="item.name" :value="item.tel" :label="item.address" clickable @click="addressId=item.id">
							<template #extra>
								<van-radio style="margin-left: 5rpx;" :name="item.id" />
							</template>
						</van-cell>
					</view>
				</van-cell-group>
			</van-radio-group>
			<van-action-sheet :show="addAddress" :z-index="1000" title="添加地址" @click-overlay="addAddress=false" @close="addAddress=false">
				<van-field label="收货人" :value="add.name" @input="onChangeName"  />
				<van-field label="手机号" :value="add.tel" @input="onChangeTel" type="tel"  />
				<van-field label="送货地址" :value="add.address" @input="onChangeAddress"  />
				<button class="button" @click="onClickAdd">确认添加</button>
			</van-action-sheet>
			<button class="button" plain type="primary" :disabled="addAddress" @click="addAddress=true">添加地址</button>
			<view v-for="(item,index) in list" :key="item.dishName">
				<van-card :num="item.value" :price="(item.price*item.discount).toFixed(2)" :desc="item.desc" :title="item.dishName" :thumb="item.image" :origin-price="item.price.toFixed(2)">
					<template #footer>
						{{'￥'+((item.price*item.discount).toFixed(2)*item.value).toFixed(2)}}
					</template>
				</van-card>
			</view>
			<van-cell-group>
				<van-cell title="总价" :value="'￥'+totPrice" />
				<van-cell title="付款方式" value="餐到付款" label="在线支付功能正在开发中" />
			</van-cell-group>
			<button class="button" type="primary" @click="onSubmit(0)">提交订单</button>
		</view>
		<view v-show="tabsIndex==1" >
			<van-cell title="自取地点" :value="info.address" />
			<van-cell title="商家电话" :value="info.tel" />
			<view v-for="(item,index) in list" :key="item.dishName">
				<van-card :num="item.value" :price="(item.price*item.discount).toFixed(2)" :desc="item.desc" :title="item.dishName" :thumb="item.image" :origin-price="item.price.toFixed(2)">
					<template #footer>
						{{'￥'+((item.price*item.discount).toFixed(2)*item.value).toFixed(2)}}
					</template>
				</van-card>
			</view>
			<van-cell-group>
			  <van-cell title="总价" :value="'￥'+totPrice" />
			  <van-cell title="付款方式" value="到店付款" label="在线支付功能正在开发中" />
			</van-cell-group>
			<button class="button" type="primary" @click="onSubmit(1)">提交订单</button>
		</view>
		<view class="safeView"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabsIndex:0,
				info:[],
				list:[],
				totPrice:0,
				//外卖
				addressId:-1,
				addressList:[],
				addAddress:false,
				add:{
					name:'',
					tel:'',
					address:''
				}
			}
		},
		onLoad(param){
			const that=this;
			that.getAddress();
			that.list=that.myConfig.tmpList;
			that.info=that.myConfig.tmpInfo;
			that.info.shopId=param.shopId;
			for(let i=0;i<that.list.length;i++){
				that.totPrice+=((that.list[i].price*that.list[i].discount).toFixed(2)*that.list[i].value);
			}
			that.totPrice=that.totPrice.toFixed(2);
		},
		methods: {
			//提交订单
			onSubmit(method){
				const that=this;
				if(that.addressId==-1&&method==0){
					uni.showToast({
						title:'还没选好地址哦',
						icon:'none',
						duration:1200
					});
					return ;
				}
				wx.showLoading();
				console.log('list',that.list);
				wx.request({
					url:that.myConfig.apiUrl+'/setOrder.php',
					method:'POST',
					data:{
						shopId:that.info.shopId,
						openId:that.myConfig.openId,
						list:that.list,
						method:method,
						addressId:method==0?that.addressId:''
					},
					success:function(res){
						wx.hideLoading();
						console.log('setOrder',res);
						if(res.data.errCode==200){
							uni.showModal({
								title:'林大干饭人',
								content:'推荐您使用“扔个垃圾”小程序对外卖垃圾进行分类',
								cancelText:'算了',
								confirmText:'体验一下',
								success:function(res){
									if(res.confirm){
										wx.navigateToMiniProgram({
										  appId: 'wx6985d1c8d0ab3725'
										});
									}else{
										uni.switchTab({
											url:'../order/order'
										});
									}
								}
							});
						}else{
							that.myConfig.err();
						}
					},
					fail:function(){
						wx.hideLoading();
						that.myConfig.err();
					}
				});
			},
			//get
			getAddress(){
				const that=this;
				wx.showLoading();
				wx.request({
					url:that.myConfig.apiUrl+'/getAddress.php',
					data:{
						openId:that.myConfig.openId
					},
					success:function(res){
						wx.hideLoading();
						console.log('getAddress',res);
						that.addressList=res.data.addressList;
					},
					fail:function(){
						wx.hideLoading();
						that.myConfig.err();
					}
				});
			},
			//添加地址
			onClickAdd(){
				const that=this;
				if(that.add.name==''||that.add.tel==''||that.add.address==''){
					uni.showToast({
						title:'请完善信息',
						icon:'none',
						duration:1200
					});
					return ;
				}
				if((that.add.tel+'').length!=11){
					uni.showToast({
						title:'手机号格式错误',
						icon:'none',
						duration:1200
					});
					return ;
				}
				wx.showLoading();
				wx.request({
					url:that.myConfig.apiUrl+'/setLocation.php',
					method:'POST',
					data:{
						openId:that.myConfig.openId,
						name:that.add.name,
						tel:that.add.tel,
						address:that.add.address,
					},
					success:function(res){
						wx.hideLoading();
						console.log('setLocation',res);
						wx.showToast({
							title:'添加成功',
							icon:'none',
							duration:1200
						});
					},
					fail:function(){
						wx.hideLoading();
						that.myConfig.err();
					},
				});
				that.addAddress=false;
				that.add={
					name:'',
					tel:'',
					address:''
				};
				that.getAddress();
			},
			//v-model
			onChangeName(value){
				const that=this;
				that.add.name=value.detail;
			},
			onChangeTel(value){
				const that=this;
				that.add.tel=value.detail;
			},
			onChangeAddress(value){
				const that=this;
				that.add.address=value.detail;
			}
		}
	};
</script>

<style scoped>
	.button{
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		width: 90%;
	}
</style>

 